<template>
  <view>
    <!-- 搜索框 -->
    <UgoSearch></UgoSearch>

    <!-- 轮播图 -->
    <!-- 
      1 img-mode="scaleToFill"  回顾原生小程序 image mode属性  设置图片内容和图片标签大小一样
      2 height 设置轮播图组件的高度   340 根据设计稿得出！！ 
     -->
    <u-swiper
      img-mode="scaleToFill"
      height="340"
      :list="swiperdata"
      name="image_src"
    ></u-swiper>
    <!-- 导航栏 -->
    <view class="u-flex catitems">
      <navigator
        v-for="item in catitems"
        :key="item.name"
        class="u-flex-1 u-p-10"
      >
        <u-image mode="widthFix" :src="item.image_src"></u-image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="floordata">
      <view
        class="floor-group"
        v-for="item1 in floordata"
        :key="item1.floor_title.name"
      >
        <view class="floor-title">
          <u-image :src="item1.floor_title.image_src" mode="widthFix"></u-image>
        </view>
        <view class="floor-content">
          <navigator v-for="item2 in item1.product_list" :key="item2.name">
            <u-image
              :src="item2.image_src"
              mode="scaleToFill"
              height="100%"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数组
      swiperdata: [],
      catitems: [],
      floordata: [],
    };
  },

  // 页面开始加载的时候发送请求
  onLoad() {
    // 获取轮播图数据
    this.getSwiperData();
    this.getCatitems();
    this.getFloordata();
  },

  methods: {
    // 获取轮播图数据
    // https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata
    async getSwiperData() {
      // uni.request 的返回值是个数组 第1个元素是错误信息 第二个元素才是正确数据
      // 解构
      const result = await this.$u.get("/home/swiperdata");
      // console.log(result);
      this.swiperdata = result.message;
    },
    async getCatitems() {
      const result = await this.$u.get("/home/catitems");
      // console.log(48,result);
      this.catitems = result.message;
    },
    async getFloordata() {
      const result = await this.$u.get("/home/floordata");
      this.floordata = result.message;
      // console.log(74,result);
    },
  },
};
</script>

<style lang="scss">
.floor-content {
  overflow: hidden;
  navigator {
    float: left;
    margin-left: 14rpx;
  }
  // 第一个导航
  navigator:first-child {
    width: 232rpx;
    height: 386rpx;
  }
  navigator:nth-last-child(-n + 4) {
    width: 232rpx;
    height: 186rpx;
  }
  navigator:nth-last-child(-n + 2) {
    margin-top: 14rpx;
  }
}
</style>